<template>
    <navigation></navigation>
    <div class="bg-gradient-to-br from-gray-50 to-blue-50/30 min-h-screen">
        <div class="max-w-[1440px] mx-auto px-10 py-12 min-h-screen flex flex-col">
            <nav class="flex items-center text-sm mb-10">
                <el-breadcrumb separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/' }">个人中心</el-breadcrumb-item>
                    <el-breadcrumb-item>用户资料</el-breadcrumb-item>
                </el-breadcrumb>
            </nav>
            <div class="bg-white rounded-xl shadow-lg p-10 backdrop-blur-sm bg-white/95 flex-grow">
                <div class="flex items-start mb-8">
                    <div class="relative group">
                        <el-avatar :size="120" :src="avatarUrl" class="ring-4 ring-white shadow-lg" />
                        <span class="absolute bottom-1 right-1 w-7 h-7 bg-primary rounded-full flex items-center justify-center cursor-pointer hover:bg-primary/90 shadow-md transition-transform duration-200 group-hover:scale-110">
                            <el-icon color="#ffffff" :size="12"><Camera /></el-icon>
                        </span>
                    </div>
                    <div class="ml-16 grid grid-cols-2 gap-x-32 gap-y-8">
                        <div class="flex items-center" v-for="(value, key) in userInfo" :key="key">
                            <span class="text-gray-500 w-16">{{ key }}</span>
                            <span class="text-gray-900">
                                <el-input v-if="['学院', '专业', '学校', '学制'].includes(key)" v-model="form[key]" :placeholder="`请输入${key}`" />
                                <span v-else>{{ value }}</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="space-y-8 max-w-xl border-t border-gray-100 pt-12 mt-12 flex-grow">
                    <el-form :model="form" label-width="100px" class="h-full flex flex-col">
                        <el-form-item label="邮箱" required>
                            <el-input v-model="form.email" placeholder="请输入邮箱" />
                        </el-form-item>
                        <el-form-item label="电话" required>
                            <el-input v-model="form.phone" placeholder="请输入电话" />
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="form.gender">
                                <el-radio label="male">男</el-radio>
                                <el-radio label="female">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="意向岗位" required>
                            <el-select v-model="form.intendedPosition" placeholder="请选择意向岗位" class="w-full">
                                <el-option label="算法工程师" value="algorithm_engineer" />
                                <el-option label="前端工程师" value="frontend_engineer" />
                                <el-option label="后端工程师" value="backend_engineer" />
                            </el-select>
                        </el-form-item>
                        <el-form-item class="mt-auto">
                            <el-button type="primary" @click="saveChanges" class="!rounded-button whitespace-nowrap">保存修改</el-button>
                            <el-button @click="resetForm" class="!rounded-button whitespace-nowrap">重置信息</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Camera } from '@element-plus/icons-vue';
import navigation from "../../views/navigation.vue";

const avatarUrl = ref('https://ai-public.mastergo.com/ai/img_res/63bbb630515f2dd3ad62d61e0471a4c1.jpg');

const userInfo = reactive({
    姓名: '张伟',
    学号: '2100770233',
    学院: '信息科学技术学院',
    专业: '人工智能',
    学校: '北京大学',
    学制: '四年制本科'
});

const form = reactive({
    email: 'zhangwei@qq.com',
    phone: '13912345678',
    gender: 'male',
    intendedPosition: 'algorithm_engineer',
    birthDate: '',
    address: '',
    bio: '',
    skills: [],
    学院: '信息科学技术学院',
    专业: '人工智能',
    学校: '北京大学',
    学制: '四年制本科'
});

const saveChanges = () => {
    ElMessage({
        message: '修改已保存',
        type: 'success'
    });
};

const resetForm = () => {
    Object.assign(form, {
        email: 'zhangwei@qq.com',
        phone: '13912345678',
        gender: 'male',
        intendedPosition: 'algorithm_engineer',
        birthDate: '',
        address: '',
        bio: '',
        skills: [],
        学院: '信息科学技术学院',
        专业: '人工智能',
        学校: '北京大学',
        学制: '四年制本科'
    });
    ElMessage('信息已重置');
};
</script>


<style scoped>
    :deep(.el-input__wrapper) {
        background-color: rgba(249, 250, 251, 0.5);
    }
    :deep(.el-input__wrapper:hover) {
        border-color: #d1d5db;
    }
    :deep(.el-input__wrapper.is-focus) {
        border-color: #1677ff;
        box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
    }
    :deep(.el-select .el-input__wrapper) {
        background-color: rgba(249, 250, 251, 0.5);
    }
    :deep(.el-button) {
        border-radius: 4px;
    }
    :deep(.el-button--primary) {
        background-color: #1677ff;
    }
    :deep(.el-button--primary:hover) {
        background-color: rgba(22, 119, 255, 0.9);
    }
    :deep(.el-button--default:hover) {
        border-color: #d1d5db;
        background-color: #f9fafb;
    }
    .max-w-\[1440px\] {
        min-width: 1440px;
    }
    .min-h-screen {
        max-height: 80vh;
    }
</style>
